<template>
    <div class="User">
      <div class="first">
        <p style="text-align:center;color:#fff;font-size:26px;">我的信息</p>
        <div class="card">
          <div class="avatar">
            <img src="@/assets/R-C.jpg" />
          </div>
          <div class="nickname">{{username}}</div>
          <div class="address">
          <van-cell title="地址" icon="location-o" />
          </div>
        </div>
      </div>
      <div class="content">
      <van-cell title="完善信息" is-link />
      <van-cell title="查看记录" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell @click="login" title="退出登录" is-link />

      <van-cell title="" is-link />
      </div>
    </div>
  </template>
  
  
  <script>
  import { getCurrentInstance, reactive, toRefs } from 'vue'
  export default {
    setup () {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        username: 'default'
      })
      state.username = localStorage.getItem('user');
      return {
        ...toRefs(state)
      };
    },
    methods:{
      login(){
        localStorage.removeItem('isLogin');
        this.$router.push('./login')
      }
    }
  }
  </script>
  
  <style scoped>
  .first {
    width: 100%;
    height: 18.75rem;
    background-color: rgb(183, 165, 248);
    position: relative;
    display: flex;
    justify-content: center;
  }
  .card {
    width: 80%;
    height: 15.625rem;
    border-radius: 0.625rem;
    background-color: #fff;
    position: absolute;
    bottom: -30px;
    box-shadow: 10px 10px 21px rgb(0 0 0 / 40%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .avatar {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .nickname{
    color:  rgb(204, 202, 202);
    margin-top: 10px;
  }
  .van-cell{
    color: rgb(204, 202, 202);
  }
  .content{
    margin-top: 5rem;
  }
  </style>